<template>
  <!-- 排行榜 -->
  <div>
    <div class="toplist">
      <div class="bangdantj">
        <div class="title">榜单推荐</div>
        <div class="bangdantj-box">
          <ul>
            <li v-for="(item, index) in toplists.slice(4,7)" :key="index"  @click="getId(item.id)">
              <div class="bangdantj-box-img">
                <img :src="item.coverImgUrl+'?param=50y50'" alt="">
              </div>
              <p>{{item.name}}</p>
            </li>
          </ul>
        </div>
      </div>
      <!-- 官方榜 -->
      <div class="guanfang">
        <div class="title">
          <span class="left iconfont icon-ting413"></span>
          官方榜
        </div>
        <div class="guanfang-item" v-for="(item, index) in toplists.slice(0,4)" :key="index"  @click="getId(item.id)">
          <div class="left">
            <div class="left-name">{{item.name}}</div>
            <div class="left-img">
              <img :src="item.coverImgUrl+'?param=50y50'" alt="">
            </div>
          </div>
          <div class="right">
            <div class="rightlist">
              <div class="item"  v-for="(key,i) in item.getTopListsDetail" :key="i"  @click="getId(item.id)">
                {{i+1}}.{{key.name}}<span>---{{ key.ar[0].name }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 精选榜 -->
      <div class="bangdantj">
        <div class="title">精选榜</div>
        <div class="bangdantj-box">
          <ul>
            <li v-for="(item, index) in toplists.slice(20,29)" :key="index"  @click="getId(item.id)">
              <div class="bangdantj-box-img">
                <img :src="item.coverImgUrl+'?param=50y50'" alt="">
              </div>
              <p>{{item.name}}</p>
            </li>
          </ul>
        </div>
      </div>
      <!-- 横向滚动 -->
      <div class="row">
      <div class="title">全球榜</div>
        <div class="row-list">
          <ul>
            <li v-for="(item, index) in toplists.slice(12,19)" :key="index"  @click="getId(item.id)">
              <div class="bangdantj-box-img">
                <img :src="item.coverImgUrl+'?param=50y50'" alt="">
              </div>
              <p>{{item.name}}</p>
            </li>
          </ul>
        </div>
      </div>
      <!-- 曲风榜 -->
      <div class="bangdantj">
        <div class="title">曲风榜</div>
        <div class="bangdantj-box">
          <ul>
            <li v-for="(item, index) in toplists.slice(4,9)" :key="index"  @click="getId(item.id)">
              <div class="bangdantj-box-img">
                <img :src="item.coverImgUrl+'?param=50y50'" alt="">
              </div>
              <p>{{item.name}}</p>
            </li>
          </ul>
        </div>
      </div>

    </div>
  </div>
</template>

<style lang="less">
.row{
     margin: 0.3125rem;
     border-radius: 0.15625rem;
     background: #fff;
     padding: 0.15625rem;
     .title {
         font-weight: 900;
         font-size: 0.28125rem;
         margin: 0rem 0rem 0.15625rem 0.234375rem;
    }
     .row-list{
         width: 100%;
         ul{
             width: 100%;
             white-space: nowrap;
             overflow-x: scroll;
             overflow-y: hidden;
             display: flex;
             align-items: center;
             padding: 0;
             box-sizing: border-box;
             li{
                 width: 1.5625rem;
                 margin: 0.15625rem 0rem 0.15625rem 0.15625rem;
                 // flex-shrink: 0;
                 .bangdantj-box-img{
                     width: 1.5625rem;
                     height: 1.5625rem;
                     border-radius: 0.15625rem;
                     overflow: hidden;
                     img{
                         width: 100%;
                         height: 100%;
                    }
                }
                 p{
                     line-height: 0.46875rem;
                     font-size: 0.25rem;
                     text-overflow: ellipsis;
                     white-space: nowrap;
                     overflow: hidden;
                }
            }
        }
         ul::-webkit-scrollbar {
             display: none;
        }
    }
}
 .guanfang{
     margin: 0.3125rem;
     border-radius: 0.15625rem;
     .title{
         font-weight: 900;
         font-size: 0.28125rem;
         margin: 0rem 0rem 0.15625rem 0.234375rem;
    }
     .guanfang-item{
         border-radius: 0.15625rem;
         background: #fff;
         margin-bottom: 0.15625rem;
         display: flex;
         .left{
             flex: 1;
             padding: 0.15625rem;
             text-align: center;
             .left-name{
                 font-size: 0.28125rem;
                 font-weight: 900;
                 margin-bottom: 0.15625rem;
            }
             .left-img{
                 width: 1.5625rem;
                 height: 1.5625rem;
                 border-radius: 0.15625rem;
                 margin: auto;
                 overflow: hidden;
                 img{
                     width: 100%;
                     height: 100%;
                }
            }
        }
         .right{
             flex: 3;
             width: 70%;
             padding: 0.15625rem 0rem;
             .rightlist{
                 height: 100%;
                 display: flex;
                 flex-flow: row wrap;
                 align-content:space-around;
                 .item{
                     width: 90%;
                     text-overflow: ellipsis;
                     white-space: nowrap;
                     overflow: hidden;
                     font-size: 0.25rem;
                     color: #333;
                     span{
                         color: #999;
                    }
                }
            }
        }
    }
}
 .guanfang-item:nth-of-type(2) {
     background:#F4E1E7;
     .left-name{
         color: #EA4384;
    }
}
 .guanfang-item:nth-of-type(3) {
     background:#E1EBEA;
     .left-name{
         color: #23998B;
    }
}
 .guanfang-item:nth-of-type(4) {
     background:#F2E0E0;
     .left-name{
         color: #E22B29;
    }
}
 .guanfang-item:nth-of-type(5) {
     background:#ECE0F6;
     .left-name{
         color: #983AFC;
    }
}
 .toplist {
     .bangdantj {
         background: #fff;
         margin: 0.3125rem;
         border-radius: 0.15625rem;
         padding: 0.15625rem;
         .title {
             font-weight: 900;
             font-size: 0.28125rem;
             margin-left: 0.234375rem;
        }
         .bangdantj-box {
             ul{
                 display: flex;
                 // overflow: hidden;
                 flex-wrap: wrap;
                 li{
                     // flex: 1;
                     float: left;
                     width: 30%;
                     margin: 0.140625rem;
                     .bangdantj-box-img{
                         img{
                             width: 100%;
                             height: 100%;
                             border-radius: 0.15625rem;
                        }
                    }
                     p{
                         font-size: 0.25rem;
                         text-align: center;
                         text-overflow: ellipsis;
                         white-space: nowrap;
                         overflow: hidden;
                    }
                }
            }
        }
    }
}
 body {
     background: #f5f5f5;
}
 
</style>

<script>
import { getTopLists, getTopListsDetail } from "../api/rank";

export default {
  data() {
    return {
      toplists: "",
    };
  },
  // 组件路由最早钩子  守卫在导航前被调用
  beforeRouteEnter(to, from, next) {
    // 获取分类数据图片
    getTopLists({ limit: 10 }).then((data) => {
      // next(to) 是一个函数，next函数决定路由是否跳转
      next((vm) => vm.getTopListsDetailFun(data.list));
    });
  },
  methods: {
    getId(id) {
      this.$router.push({
        path: "/recommend/ranklist",
        query: { id },
      });
    },
    getTopListsDetailFun(toplistsData) {
      this.toplists = toplistsData;
      // 遍历图片数据的id，再请求列表数据
      for (let item in toplistsData) {
        getTopListsDetail({ id: toplistsData[item].id }).then((data) => {
          if (data.playlist.tracks.length) {
            // $set是为了解决双向数据绑定失效的问题   但数据没有被双向绑定的时候，我们就需要使用set了
            this.$set(
              this.toplists[item],
              "getTopListsDetail",
              data.playlist.tracks.slice(0, 3)
            );
          }
        });
      }
    },
  },
  
};
</script>
